<template>
  <view class="change-password-container">
    <!-- 自定义导航栏 -->
    <cu-custom bgColor="bg-gradual-blue" :isBack="true">
      <block slot="content">修改密码</block>
    </cu-custom>

    <!-- 密码修改表单 -->
    <view class="form-container bg-white margin-top">
      <view class="form-section">
        <view class="section-title padding">
          <text class="text-lg text-bold">密码修改</text>
        </view>
        
        <view class="form-item">
          <view class="form-label">
            <text class="text-red">*</text>
            <text>新密码</text>
          </view>
          <input 
            v-model="formData.newPassword" 
            class="form-input" 
            placeholder="请输入新密码"
            type="password"
          />
        </view>
        
        <view class="form-item">
          <view class="form-label">
            <text class="text-red">*</text>
            <text>确认密码</text>
          </view>
          <input 
            v-model="formData.confirmPassword" 
            class="form-input" 
            placeholder="请再次输入新密码"
            type="password"
          />
        </view>
      </view>
      
      <!-- 密码规则提示 -->
      <view class="password-tips margin-top">
        <view class="tips-title padding-lr">
          <text class="text-df text-bold">密码规则</text>
        </view>
        <view class="tips-content padding">
          <view class="tip-item">
            <text class="cuIcon-check text-green"></text>
            <text class="margin-left-sm">密码长度6-20位</text>
          </view>
          <view class="tip-item">
            <text class="cuIcon-check text-green"></text>
            <text class="margin-left-sm">建议包含数字和字母</text>
          </view>
          <view class="tip-item">
            <text class="cuIcon-check text-green"></text>
            <text class="margin-left-sm">两次输入密码必须一致</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 保存按钮 -->
    <view class="button-section margin-top">
      <button 
        class="cu-btn bg-blue lg block margin" 
        @click="changePassword"
        :loading="saving"
      >
        {{ saving ? '修改中...' : '确认修改' }}
      </button>
    </view>
  </view>
</template>

<script>
import authService from "../../src/services/auth.js";
import { http } from "@/common/service/service.js";

export default {
  data() {
    return {
      formData: {
        newPassword: "",
        confirmPassword: "",
      },
      loginType: "",
      saving: false,
    };
  },

  computed: {
    isEmployeeLogin() {
      return this.loginType === "employee";
    },
    
    isAdminLogin() {
      return this.loginType === "admin";
    },
  },

  onLoad() {
    this.initPage();
  },

  methods: {
    initPage() {
      this.loginType = uni.getStorageSync("erp_login_type") || "";
    },

    async changePassword() {
      if (!this.validateForm()) {
        return;
      }

      this.saving = true;
      
      try {
        let response;
        const currentUser = authService.getCurrentUser() || {};
        
        if (this.isEmployeeLogin) {
          // 员工修改密码 - 调用员工登录控制器接口
          response = await http.post("/sys/employeeLogin/updatePassword", null, {
            params: {
              oldPassword: "", // 员工修改密码不需要原密码
              newPassword: this.formData.newPassword,
            }
          });
        } else {
          // 管理员修改密码 - 调用用户密码修改接口
          response = await http.get("/sys/user/passwordChange", {
            params: {
              username: currentUser.username,
              password: this.formData.newPassword,
              smscode: "000000", // 临时验证码
              phone: currentUser.phone || "13800000000",
            }
          });
        }

        if (response.data.success) {
          uni.showModal({
            title: "修改成功",
            content: "密码修改成功，请重新登录",
            showCancel: false,
            success: () => {
              // 清除登录信息并跳转到登录页
              authService.logout();
            },
          });
        } else {
          uni.showToast({
            title: response.data.message || "修改失败",
            icon: "none",
          });
        }
      } catch (error) {
        console.error("修改密码失败:", error);
        uni.showToast({
          title: "修改失败，请重试",
          icon: "none",
        });
      } finally {
        this.saving = false;
      }
    },

    validateForm() {
      if (!this.formData.newPassword.trim()) {
        uni.showToast({
          title: "请输入新密码",
          icon: "none",
        });
        return false;
      }

      if (this.formData.newPassword.length < 6 || this.formData.newPassword.length > 20) {
        uni.showToast({
          title: "密码长度应为6-20位",
          icon: "none",
        });
        return false;
      }

      if (!this.formData.confirmPassword.trim()) {
        uni.showToast({
          title: "请确认新密码",
          icon: "none",
        });
        return false;
      }

      if (this.formData.newPassword !== this.formData.confirmPassword) {
        uni.showToast({
          title: "两次输入的密码不一致",
          icon: "none",
        });
        return false;
      }

      return true;
    },
  },
};
</script>

<style lang="scss" scoped>
.change-password-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.form-container {
  border-radius: 12rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
  margin: 0 24rpx;
}

.section-title {
  border-bottom: 1rpx solid #f0f0f0;
}

.form-item {
  display: flex;
  align-items: center;
  padding: 32rpx 24rpx;
  border-bottom: 1rpx solid #f8f9fa;
  
  &:last-child {
    border-bottom: none;
  }
}

.form-label {
  width: 160rpx;
  font-size: 32rpx;
  color: #333;
  flex-shrink: 0;
  
  .text-red {
    margin-right: 8rpx;
  }
}

.form-input {
  flex: 1;
  font-size: 32rpx;
  color: #333;
  text-align: right;
}

.password-tips {
  background-color: white;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
  margin: 0 24rpx;
  
  .tips-title {
    border-bottom: 1rpx solid #f0f0f0;
  }
  
  .tips-content {
    .tip-item {
      display: flex;
      align-items: center;
      margin-bottom: 16rpx;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .cuIcon-check {
        font-size: 28rpx;
      }
      
      text {
        font-size: 28rpx;
        color: #666;
      }
    }
  }
}

.button-section {
  padding: 0 24rpx;
}
</style>
